/* Modal personalizado */
#modal3 .modal.fade .modal-dialog {
    position: fixed;  /* Modal se posiciona de forma fija */
    right: 0;  /* Alineado al borde derecho */
    top: 0;  /* Inicia en la parte superior */
    max-width: 100%;  /* Asegura que el modal ocupe todo el ancho */
    transition: transform 0.5s ease;  /* Desliza el modal suavemente */
}
#modal3 .modal-dialog {
    height: calc(100vh - var(--navbar-height)); /* Ajusta según el navbar */
    display: flex;
    align-items: center; /* Asegura que el modal se centre verticalmente */
}

#modal3 .modal-content {
    display: flex;
    flex-direction: column; /* Para que los hijos se acomoden verticalmente */
    height: 100%; /* Asegura que ocupe toda la altura */
}

#modal3 .modal-body {
    flex-grow: 1; /* Hace que el cuerpo del modal ocupe todo el espacio disponible */
    overflow-y: auto; /* Permite el scroll si el contenido es muy grande */
    display: flex; /* Asegura que los elementos internos también sean flexibles */
    flex-direction: column; /* Mantiene el contenido organizado */
}

#modal3 .modal-footer {
    margin-top: auto; /* Empuja el footer al fondo */
}

/* Agregar margen superior para separarlo del navbar */
#modal3 .modal-dialog {
    margin-top: 20px; /* Ajusta este valor para la separación entre el modal y el navbar */
}

/* Reajustes para dispositivos grandes */
@media (min-width: 768px) {
    #modal3 .modal-dialog {
        width: 30%;  /* Modal ocupará el 30% del ancho en pantallas medianas */
    }
}

@media (min-width: 992px) {
    #modal3 .modal-dialog {
        width: 25%;  /* Modal ocupará el 25% del ancho en pantallas grandes */
    }
}

@media (min-width: 1120px) {
    #modal3 .modal-dialog {
        width: 20%;  /* Modal ocupará el 20% del ancho en pantallas extra grandes */
    }
}

/* Asegúrate de que los bordes redondeados se apliquen correctamente */
#modal3 .modal,
#modal3 .modal-dialog,
#modal3 .modal-content {
    border-radius: 0px !important;  /* Sin bordes redondeados */
}

/* Estilo del backdrop */
#modal3 .modal-backdrop {
    opacity: 0.5; 
    transition: opacity 0.3s linear; 
}

/* Cuando el modal está abierto, la opacidad del backdrop será de 0.9 */
#modal3 .modal.show .modal-backdrop {
    opacity: 0.9;
}

/* Aparece desde la derecha con deslizamiento */
#modal3 .modal.fade .modal-dialog {
    transform: translateX(100%); /* Modal se desliza desde el lado derecho */
}

#modal3 .modal.fade.show .modal-dialog {
    transform: translateX(0); /* Modal se coloca en su posición final */
}

/* Estilos para el contenido del modal */
#modal3 .modal-header {
    background-color: #f8f9fa; /* Fondo claro en la cabecera */
    border-bottom: 1px solid #ddd;  /* Línea divisoria */
}

#modal3 .modal-body {
    padding: 20px;  /* Espaciado alrededor del contenido */
    overflow-y: auto;  /* Hacer scroll si el contenido es largo */
}

#modal3 .modal-footer {
    background-color: #f8f9fa; /* Fondo claro en el pie */
    border-top: 1px solid #ddd;  /* Línea divisoria */
}

/* Estilos para los botones */
#modal3 .btn-secondary {
    background-color: #6c757d;  /* Color de fondo para el botón secundario */
    border-color: #6c757d;  /* Color del borde para el botón secundario */
}

#modal3 .btn-primary {
    background-color: #080808;  /* Color de fondo para el botón primario */
    border-color: #007bff;  /* Color del borde para el botón primario */
}

#modal3 .btn-close {
    color: #000;  /* Color de la 'x' para cerrar el modal */
    opacity: 0.5;  /* Opacidad de la 'x' */
}

/* Efecto hover sobre el botón de cierre */
#modal3 .btn-close:hover {
    opacity: 1;  /* Aumenta la opacidad al hacer hover */
}

.cart-footer-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cart-total-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

.cart-total-label {
    font-weight: bold;
    font-size: 1.1em;
}

#cart-total-amount {
    font-weight: bold;
    font-size: 1.2em;
    color: #2c5282;
}

.cart-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}